@import "variables";

community {
  seed-cycle {
    .cycle-container {
      .title {
        display: flex;
        flex-direction: column-reverse;
        height: pxTorem(140);
        line-height: inherit;
        padding-right: pxTorem(70);
        padding-bottom: pxTorem(22);
        background: linear-gradient(transparent, rgba(0, 0, 0, .6));
        span {
          width: 100%;
        }
      }
      .cycle-pagination {
        left: 0;
        right: 0;
        bottom: pxTorem(12);
        justify-content: center;
        height: auto;
        .cycle-pagination-bullet {
          width: 4px;
          height: 4px; // border-radius: 1.5px;
          background-color: #fff;
          opacity: 1;
          &.active {
            background-color: color($h5, c1);
          }
        }
      }
    }
  }
  .md-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-top: pxTorem(26);
    background-color: color($h5, c10);
    h2 {
      padding-left: pxTorem(20px);
      font-weight: 700;
      border-left: pxTorem(6px) solid color($h5, c1);
    }
    p {
      padding-right: pxTorem(24);
      margin-right: pxTorem(20);
      @include font-dpr(24px);
      color: color($h5, c4);
    }
  }
  .circle-nav {
    margin-bottom: pxTorem(15);
    .change {
      position: relative;
      height: pxTorem(65);
      line-height: pxTorem(65);
      padding-right: pxTorem(65);
      @include font-dpr(26px);
      text-align: center;
      color: #999;
      background-color: #f6f6f6;
      &::after {
        content: '';
        position: absolute;
        top: 0;
        bottom: 0;
        margin: auto pxTorem(10) auto;
        display: inline-block;
        @include icon(23, 24, '#{$icons-path}/change.png')
      }
    }
  }
}
